<script setup lang="ts">
import type { ScheduleScheme } from '@/types'

defineProps<{
  shifts: ScheduleScheme['shift']
}>()
</script>

<template>
  <div class="padding-sm shift-config">
    <div
      v-for="(item, index) in shifts"
      :key="index"
      class="align-center flex"
    >
      <div
        class="shift"
        style="
          font-size: 14px;
          color: var(--el-text-color-regular);
        "
      >
        <p class="align-center flex">
          <span v-if="item.time">{{ item.time }}</span>
          <span
            v-if="item.isCrossDay"
            style="color: var(--el-color-danger)"
          >
            （跨天）
          </span>
          <span
            :class="{
              'margin-left-xs': item.time || item.isCrossDay,
            }"
          >
            {{ item.name }}
          </span>
        </p>
      </div>
      <div
        class="margin-left-sm margin-right-sm line"
      />
      <div class="team">
        <slot
          name="team"
          :index="index"
          :shift="item"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shift-config {
  flex: 1;
  @include roll();
}
.shift-config .line {
  flex: 1;
  height: 0;
  border-top: 1px dashed var(--el-border-color-darker);
}
.team :deep(.el-select) {
  width: 150px;
}
</style>
